<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <meta name="robots" content="noindex,follow" />
        <title>Calculate driving distance with Google Maps API</title>

        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
        <!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
        <script type="text/javascript">

            var geocoder, location1, location2, gDir;

            function initialize() {
                geocoder = new GClientGeocoder();
                gDir = new GDirections();
                GEvent.addListener(gDir, "load", function() {
                    var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
                    var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
                    document.getElementById('results').innerHTML = drivingDistanceKilometers + ' kilometers';
                });
            }

            function showLocation() {
                geocoder.getLocations(document.forms[0].address1.value, function (response) {
                    if (!response || response.Status.code != 200)
                    {
                        alert("Sorry, we were unable to geocode the first address");
                    }
                    else
                    {
                        location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                        geocoder.getLocations(document.forms[0].address2.value, function (response) {
                            if (!response || response.Status.code != 200)
                            {
                                alert("Sorry, we were unable to geocode the second address");
                            }
                            else
                            {
                                location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                                gDir.load('from: ' + location1.address + ' to: ' + location2.address);
                            }
                        });
                    }
                });

                var fromTemp=document.getElementById('from').value;
                var toTemp=document.getElementById('to').value;

                document.getElementById('frame').innerHTML = '<embed src="http://localhost:8084/BookMyDriver/Test/FinalGeoCoding.jsp?one='+fromTemp+'&two='+toTemp+'" style="height: 800px; width: 1000px;" >';
              
            }

        </script>
    </head>

    <body onload="initialize()">

        <form action="#" onsubmit="showLocation(); return false;">
            <p>
                <input type="text" name="address1" id="from" value="Mumbai"/>
                <input type="text" name="address2"  id="to" value="Nagpur" />
                <input type="submit" value="Search" />
            </p>
        </form>

        <img src="https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1"/>
        Represent Starting point :

        <img src="https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=B&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1"/>
        Represent Ending Point :

        <p id="results"></p>
        <div id="frame">

        <embed src="http://localhost:8084/BookMyDriver/Test/FinalGeoCoding.jsp?one=Nagpur&two=Mumbai" style="height: 800px; width: 1000px;" >

        </div>

        

    </body>
</html>